<template>
    <div class="validate-input-container pb-3">

        <input v-if="tag!=='textarea'"
        :class="{'is-invalid':inputRef.error}"
        class="form-control" 
        
        v-model="inputRef.val"

        v-bind="$attrs"
        @blur="validateInput"
        >
        <textarea v-else
        :class="{'is-invalid':inputRef.error}"
        class="form-control" 

        v-model="inputRef.val"
        v-bind="$attrs"
        @blur="validateInput"
        >
        </textarea>
        <span v-if="inputRef.error" class="invalid-feedback">{{ inputRef.message }}</span>

    </div>


</template>

<script lang="ts">
import { defineComponent, reactive, PropType,onMounted, watch,computed } from 'vue';
import { emitter } from './ValidateForm.vue';
const emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ 
export interface RuleProp {
    type: 'required' | 'email'  | 'custom';
    message: string;
    validator?: () => boolean;
}
export type TagType = 'input'|'textarea'
export type RulesProp = RuleProp[]
export default defineComponent({

    props: {
        rules: Array as PropType<RulesProp>,
        modelValue:String,
        tag:{
            type:String as PropType<TagType>,
            default:"input"
        }
    },
    inheritAttrs:false,
    setup(props,context) {
        const inputRef = reactive({
            val: computed({
                get:() => props.modelValue || '',
                set: val => {
                    context.emit('update:modelValue',val)
                }
            }),
            error: false,
            message: ''
        })

        const validateInput = () => {
            if (props.rules) {
                const allPassed = props.rules.every(rule => {
                    let passed = true
                    inputRef.message = rule.message
                    switch (rule.type) {
                        case 'required':
                            passed = (inputRef.val.trim() !== '')
                            break
                        case 'email':
                            passed = emailReg.test(inputRef.val)
                            break
                        default:
                            break
                    }
                    return passed
                })
                inputRef.error = !allPassed
                return allPassed
            }
            return true


        }
        onMounted(()=>{
            emitter.emit('form-item-created',validateInput)
        })
      
        return {
            inputRef,
            validateInput,
            
        }
    },

})
</script>
